<template>
	<view class="list">
		<view class="item" v-for="item,index in list" :key="index">
			<view class="img">
				<image :src="item.data[0].poster" mode=""></image>
			</view>
			<view class="content">
				<view class="name">{{item.data[0].name}}</view>
				<view class="info1">
					<view class="country">{{item.data[0].country}}</view>
					<view class="genre">{{item.data[0].genre}}</view>
				</view>
				<view class="info2">
					<view class="rating">{{item.doubanRating}}</view>
					<view class="date">{{item.dateReleased}}</view>
				</view>
				<view class="desc">
					{{item.data[0].description}}
				</view>
			</view>
			<view class="top">top{{index+1}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"

	onLoad(() => {
		getTopMoveList()
	})
	let pageData = {
		page: 1,
		pageSize: 10
	}
	const list = ref([])

	async function getTopMoveList() {
		let res = await uni.$get("https://api.wmdb.tv/api/v1/top", {
			type: 'Douban',
			skip: (pageData.page - 1) * pageData.pageSize,
			limit: pageData.pageSize,
			lang: 'Cn'
		})
		list.value=[...list.value,...res.data]
		console.log(list.value)
	}
	onReachBottom(() => {
           pageData.page++
		   getTopMoveList()
	})
</script>

<style scoped lang="scss">
	.list {
		.item {
			border: 1px solid #ccc;
			margin: 10rpx;
			padding: 10rpx;
			display: flex;
			justify-content: space-between;
			position: relative;

			.img {
				width: 150rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				width: 550rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.name {
					font-size: 35rpx;
					color: #666;
				}

				.info1 {
					display: flex;
					font-size: 28rpx;

					.country {
						width: 200rpx;
					}
				}

				.info2 {
					display: flex;

					.rating {
						width: 200rpx;
					}
				}

				.desc {
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					font-size: 26rpx;
					color:#888;
				}

			}

			.top {
				position: absolute;
				top: 3px;
				right: 3px;
				color:#fff;
				padding: 3px 5px;
				border-radius: 3px;
				background-color: red;
			}
		}
	}
</style>